import React, { useState, useEffect } from 'react';
import '../public/style/components/header.css'
import { Row, Col, Menu } from 'antd'
import { HomeOutlined, VideoCameraOutlined, SnippetsOutlined, SmileOutlined, BlockOutlined } from '@ant-design/icons'
import Router from 'next/router'
import Link from 'next/link'
import Axios from 'axios';
import servicePath from '../config/apiUrl';

const Header = () => {

  // const [navType, setNavType] = useState([])

  // useEffect(() => {
  //   const fetchData = async () => {
  //     const result = await Axios(servicePath.getTypeList).then(
  //       res => {
  //         // console.log(res.data.data)
  //         return res.data.data
  //       }
  //     )
  //     setNavType(result)  
  //   }

  //   fetchData()

  // },[])
  const navType=['首页','实战项目','学习记录','生活日记','留言板']

  function clickType(e) {
    if (e.key == 0) {
      Router.push('/')
    } else if (e.key == 4) {
      Router.push({
        pathname: '/message'
      })
    } else {
      // Router.push('/list?id=' + e.key,{query:{title:navType[e.key]}})
      Router.push({
        pathname: '/list',
        query: {
          id: e.key,
          title: navType[e.key]
        }
      })
    }
  }

  return (
    <div className="header">
      <Row type='flex' justify="center">
        <Col xs={24} sm={24} md={10} lg={10} xl={8}>
          <span className='header-logo'>He-Yang</span>
          <span className='header-txt'>热爱前端开发，记录学习生活</span>
        </Col>
        <Col xs={0} sm={0} md={14} lg={8} xl={8}>
          <Menu mode="horizontal" onClick={clickType}>
            <Menu.Item key="0">
              <HomeOutlined />
              {navType[0]}
            </Menu.Item>
            <Menu.Item key="1">
              <VideoCameraOutlined />
              {navType[1]}
            </Menu.Item>
            <Menu.Item key="2">
              <SnippetsOutlined />
              {navType[2]}
            </Menu.Item>
            <Menu.Item key="3">
              <SmileOutlined />
              {navType[3]}
            </Menu.Item>
            <Menu.Item key="4">
              <BlockOutlined />
              {navType[4]}
            </Menu.Item>
            <Menu.Item key="5">
              <SmileOutlined />
              <Link href="http://blog.heyangyun.xyz"><a>博客后台</a></Link>
            </Menu.Item>
          </Menu>
        </Col>
      </Row>
    </div>
  )
}
  


export default Header